<template>
  <div class="home">
    <ul class="product_r">
      <li v-for="item in products" :key="item._id" @click="godetail(item._id)">
        <img :src="item.coverImg" alt="" />
        <div class="product_r">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqProducts } from "../../api/product";
export default {
  data() {
    return {
      products: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async initProducts() {
      const result = await reqProducts();
      console.log(result);
      this.products = result.products;
    },
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    this.initProducts();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.home {
  padding-bottom: 40px;
}
.product_r li {
  display: flex;
  padding: 10px;
}
.product_r li img {
  width: 80px;
  height: 80px;
  display: block;
}
.product_r li .product_r {
  flex: 1;
  padding-left: 10px;
}
.product_r li .product_r h3 {
  font-size: 13px;
  color: #888;
}
</style>
